<template>
<!--  <div class="ssc-card ssc-wrapper flex align-start justify-between bg-red">-->
<!--    <div class="ssc-head-line w-30 mb"></div>-->
<!--    <div class="flex flex-row">-->
<!--      <div class="ssc-square w-20"></div>-->
<!--      <div class="ssc-square w-20"></div>-->
<!--      <div class="ssc-square w-20"></div>-->
<!--      <div class="ssc-square w-20"></div>-->
<!--      <div class="ssc-line w-30"></div>-->
<!--      <div class="ssc-circle w-10"></div>-->
<!--    </div>-->
<!--  </div>-->

<!--  <div class="ssc-card ssc-wrapper flex justify-center align-center">-->
<!--    <div class="ssc-line w-20 mb"></div>-->
<!--    <div class="ssc-line w-30 mb"></div>-->
<!--    <div class="ssc-line w-50 mb"></div>-->
<!--    <div class="flex flex-row">-->
<!--      <div class="ssc-line w-10 mb mr-10"></div>-->
<!--      <div class="ssc-line w-10 mb"></div>-->
<!--    </div>-->
<!--  </div>-->

<!--  <div class="ssc-card ssc-wrapper">-->
<!--    <div class="ssc-line w-30 mb"></div>-->
<!--    <br/>-->
<!--    <div class="flex align-start justify-between">-->
<!--      <div class="w-30">-->
<!--        <div class="ssc-head-line mb"></div>-->
<!--        <div class="ssc-line w-80"></div>-->
<!--        <div class="ssc-line w-40"></div>-->
<!--        <div class="ssc-line w-60"></div>-->
<!--      </div>-->
<!--      <div class="w-30">-->
<!--        <div class="ssc-head-line mb"></div>-->
<!--        <div class="ssc-line w-80"></div>-->
<!--        <div class="ssc-line w-40"></div>-->
<!--        <div class="ssc-line w-60"></div>-->
<!--      </div>-->
<!--      <div class="w-30">-->
<!--        <div class="ssc-head-line mb"></div>-->
<!--        <div class="ssc-line w-80"></div>-->
<!--        <div class="ssc-line w-40"></div>-->
<!--        <div class="ssc-line w-60"></div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->

<!--  <div class="ssc-card ssc-wrapper">-->
<!--    <div class="ssc-circle w-20"></div>-->
<!--    <div class="ssc-line w-30"></div>-->
<!--    <div class="ssc-line w-20"></div>-->
<!--    <div class="ssc-line w-20"></div>-->
<!--  </div>-->
<!--  <div class="ssc-card ssc-wrapper">-->
<!--    <div class="ssc-line w-10"></div>-->
<!--    <div class="ssc-line w-30"></div>-->
<!--    <div class="ssc-line w-10"></div>-->
<!--  </div>-->

  <div class="card">
    <div class="card__image">
      <Skeletor height="200" />
    </div>

    <div class="card__slim">
      <div class="card__avatar">
        <Skeletor circle size="48" class="post__avatar" />
      </div>

      <div class="card__meta">
        <h2>
          <Skeletor width="50%" />
        </h2>

        <p>
          <Skeletor width="75%" />
        </p>
      </div>
    </div>

    <div class="card__text">
      <Skeletor v-for="i in 5" :key="i" />
    </div>

    <div class="card__actions">
      <Skeletor width="96" height="36" pill style="margin-right: 4px" />
      <Skeletor width="96" height="36" pill />
    </div>
  </div>
</template>

<script setup lang="ts">
import 'vue-skeletor/dist/vue-skeletor.css';
 import { Skeletor } from 'vue-skeletor'
</script>

<style scoped lang="scss">
</style>
